<template>
  <div class="login-wrap">
    <!-- 动画背景 -->
    <AnimationBackground />
    <div class="login-container">
      <!-- 遮罩 -->
      <div class="mask"></div>
      <div class="login-body" :class="[showLogin ? 'show-login' : '']">
        <div class="login-on-wrap">
          <!-- 登录表单 -->
          <Login-form @toRegistry="toRegistry"></Login-form>
        </div>
        <div class="registry-wrap">
          <!-- 注册表单 -->
          <registry-form @toLogin="toLogin"></registry-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import LoginForm from "./components/LoginForm.vue";
import RegistryForm from "./components/RegistryForm.vue";
import AnimationBackground from "@/components/AnimationBackgound/index.vue";

import { ref } from "vue";
const showLogin = ref(true);
const toRegistry = () => {
  showLogin.value = false;
};
const toLogin = () => {
  showLogin.value = true;
};
</script>

<style lang="less" scoped>
.login-wrap {
  background-color: #f1f1f1;
  height: inherit;
  position: relative;
  background: linear-gradient(to left, #8f94fb, #4e54c8);

  .login-container {
    display: flex;
    width: 800px;
    height: 540px;
    padding: 20px 0;
    margin: 0 auto;
    position: absolute;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 50%;
      height: 100%;
      background-color: rgba(45, 140, 240, 0.2);
      background-image: url(../../assets/images/login-admin.svg);
      background-size: 100% 100%;
      z-index: 999;
      display: flex;
      justify-content: center;
      align-items: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-family: "Monaspace Radon", Menlo, Monaco, "Courier New", monospace;
      border-radius: 12px;
      /* 添加毛玻璃特效 */
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);

      .title {
        font-size: 48px;
        margin: 64px 0 20px 0;
      }

      .desc {
        color: #f1f1f1;
      }
    }
    .login-body {
      box-shadow: 3px 3px 10px rgba(255, 255, 255, 0.3);
      width: 100%;
      height: inherit;
      border-radius: 4px;
      display: flex;
      overflow: hidden;
      .login-on-wrap,
      .registry-wrap {
        width: 50%;
        height: inherit;
        transition: transform 0.6s cubic-bezier(1, -0.375, 0.285, 0.995);
        background-color: #f5f5f5;
      }

      .login-on-wrap {
        transform: translateX(0%);
        z-index: 0;
      }

      .registry-wrap {
        transform: translateX(0%);
        z-index: 1;
      }

      &.show-login {
        .login-on-wrap {
          transform: translateX(100%);
          z-index: 1;
        }

        .registry-wrap {
          transform: translateX(-100%);
          z-index: 0;
        }
      }
    }
  }
}
// 移动端适配
@media screen and (max-width: 800px) {
  .login-wrap {
    .login-container {
      width: 540px;
      height: 800px;
      .mask {
        width: 100%;
        height: 15vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
      .login-body {
        flex-direction: column;
        .login-on-wrap,
        .registry-wrap {
          width: 100%;
        }
        .login-on-wrap {
          transform: translate(0, -100%);
          z-index: 0;
        }

        .registry-wrap {
          z-index: 1;
          transform: translate(0, -100%);
        }
        &.show-login {
          .login-on-wrap {
            transform: translate(0, 0);
            z-index: 1;
          }

          .registry-wrap {
            transform: translate(0, 0);
            z-index: 0;
          }
        }
      }
    }
  }
}
</style>
